<!Doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>注册中心</title>
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <style>
        /* track base Css */
        .container {
            margin-top:15px;
        }
        .body{
            background-color: rgba(242,227,174,0.42);
            background-repeat: no-repeat;
            background-size:100% 100%;
            -moz-background-size:100% 100%;
        }
    </style>
    <link rel="stylesheet" href="/css/layui.css">
    <link rel="stylesheet" href="/css/zoomify.min.css">
    <link rel="stylesheet" href="/css/font-awesome.css">
    <link rel="stylesheet" href="/css/plugins/summernote/summernote.css">
    <link rel="stylesheet" href="/css/plugins/summernote/summernote-0.8.8.css">
    <script type="text/javascript" src="/js/jquery.min.js"></script>
    <script type="text/javascript" src="/js/bootstrap.min.js"></script>
    <script src="/js/plugins/layer/layer.js"></script>
    <script type="text/javascript" src="/layui/layui.js"></script>
    <script type="text/javascript" src="/js/zoomify.min.js"></script>
</head>
<body class="body">
<div class="container">
    <div class="col-md-6 col-md-offset-3">
        <form action="http://wwww.baidu.com" class="">

            <div class="form-group has-feedback">
                <label for="username">用户名</label>
                <div class="input-group">
                    <span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
                    <input id="username" class="form-control" placeholder="请输入用户名" maxlength="20" type="text">
                </div>

                <span style="color:red;display: none;" class="tips"></span>
                <span style="display: none;" data-id="username" class=" glyphicon glyphicon-remove form-control-feedback"></span>
                <span style="display: none;" class="glyphicon glyphicon-ok form-control-feedback"></span>
            </div>
            <div class="form-group has-feedback">
                <label for="password">密码</label>
                <div class="input-group">
                    <span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>
                    <input id="password" class="form-control" placeholder="请输入密码" maxlength="20" type="password">
                </div>

                <span style="color:red;display: none;" class="tips"></span>
                <span style="display: none;" data-id="password" class="glyphicon glyphicon-remove form-control-feedback"></span>
                <span style="display: none;" class="glyphicon glyphicon-ok form-control-feedback"></span>
            </div>

            <div class="form-group has-feedback">
                <label for="passwordConfirm">确认密码</label>
                <div class="input-group">
                    <span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>
                    <input id="passwordConfirm" class="form-control" placeholder="请再次输入密码" maxlength="20" type="password">
                </div>
                <span style="color:red;display: none;" class="tips"></span>
                <span style="display: none;" data-id="passwordConfirm" class="glyphicon glyphicon-remove form-control-feedback"></span>
                <span style="display: none;" data-id="passwordConfirm" class="glyphicon glyphicon-ok form-control-feedback"></span>
            </div>
            <div class="form-group has-feedback">
                <label for="email">邮箱</label>
                <div class="input-group">
                    <span class="input-group-addon"><span class="glyphicon glyphicon-send"></span></span>
                    <input id="email" class="form-control" placeholder="请输入邮箱" maxlength="50" type="text">
                </div>

                <span style="color:red;display: none;" class="tips"></span>
                <span style="display: none;" class=" glyphicon glyphicon-remove form-control-feedback"></span>
                <span style="display: none;" class="glyphicon glyphicon-ok form-control-feedback"></span>
            </div>
            <div class="row form-group">
                <div class="col-xs-8">
                    <label>头像</label>
                    <div class="input-group">
                        <span class="input-group-addon"><span class="glyphicon glyphicon-camera"></span></span>
                        <button class="layui-upload-drag" type="button" id="oneUpload">
                            <i class="fa fa-cloud"></i>上传文件上传图片
                            <p>点击上传，或将文件拖拽到此处</p>
                        </button>
                    </div>
                    <input name="portrait" id="portrait" type="hidden">
                    <span style="color:red;display: none;" class="tips"></span>
                    <span style="display: none;" class=" glyphicon glyphicon-remove form-control-feedback"></span>
                    <span style="display: none;" class="glyphicon glyphicon-ok form-control-feedback"></span>
                </div>
                <div class="col-xs-4">
                    <div class="form-group has-feedback"  id="picture" style="padding-top: 30px">
                    </div>
                </div>
            </div>

            <div class="row form-group">
                <div class="col-xs-7">
                    <div class="form-group has-feedback">
                        <label for="idcode-btn">验证码</label>
                        <div class="input-group">
                            <span class="input-group-addon"><span class="glyphicon glyphicon-qrcode"></span></span>
                            <input id="idcode-btn" class="form-control" placeholder="请输入验证码" maxlength="4" type="text">
                        </div>
                        <span style="color:red;display: none;" class="tips"></span>
                        <span style="display: none;" data-id="idcode-btn" class="glyphicon glyphicon-remove form-control-feedback"></span>
                        <span style="display: none;" class="glyphicon glyphicon-ok form-control-feedback"></span>
                    </div>
                </div>
                <div class="col-xs-5" style="padding-top: 20px">
                    <div class="form-group has-feedback">
                        <img id="vcode" src="/generate/valicode">
                    </div>
                </div>
            </div>

            <div class="form-group">
                <input class="form-control btn btn-primary" id="submit" value="立&nbsp;&nbsp;即&nbsp;&nbsp;注&nbsp;&nbsp;册" type="submit">
            </div>

            <div class="form-group">
                <input value="重置" id="reset" class="form-control btn btn-danger" type="reset">
            </div>
        </form>
    </div>
</div>

<script>
    $("#vcode").click(function (e) {
        $(this).attr("src","/generate/valicode?"+new Date().getTime())
    })
    var regUsername = /^[a-zA-Z_][a-zA-Z0-9_]{4,19}$/;
    var regPasswordSpecial = /[~!@#%&=;':",./<>_\}\]\-\$\(\)\*\+\.\[\?\\\^\{\|]/;
    var regPasswordAlpha = /[a-zA-Z]/;
    var regPasswordNum = /[0-9]/;
    var password;

    var check = [false, false, false, false, true, true,false];

    function isEmail(mail) {
        var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
        if (filter.test(mail)) {
            return true;
        } else {
            return false;
        }
    }
    //校验成功函数
    function success(Obj, counter) {
        Obj.parent().parent().removeClass('has-error').addClass('has-success');
        $('.tips').eq(counter).hide();
        $('.glyphicon-ok').eq(counter).show();
        $('.glyphicon-remove').eq(counter).hide();
        check[counter] = true;

    }

    // 校验失败函数
    function fail(Obj, counter, msg) {
        Obj.parent().parent().removeClass('has-success').addClass('has-error');
        $('.glyphicon-remove').eq(counter).show();
        $('.glyphicon-ok').eq(counter).hide();
        $('.tips').eq(counter).text(msg).show();
        check[counter] = false;
    }

    // 用户名匹配
    $('.container').find('input').eq(0).change(function() {
        if (regUsername.test($(this).val())) {
            success($(this), 0);
        } else if ($(this).val().length < 5) {
            fail($(this), 0, '用户名太短，不能少于5个字符');
        } else {
            fail($(this), 0, '用户名只能为英文数字和下划线,且不能以数字开头')
        }

    });



    // 密码匹配

    // 匹配字母、数字、特殊字符至少两种的函数
    function atLeastTwo(password) {
        var a = regPasswordSpecial.test(password) ? 1 : 0;
        var b = regPasswordAlpha.test(password) ? 1 : 0;
        var c = regPasswordNum.test(password) ? 1 : 0;
        return a + b + c;

    }

    $('.container').find('input').eq(1).change(function() {

        password = $(this).val();

        if ($(this).val().length < 8) {
            fail($(this), 1, '密码太短，不能少于8个字符');
        } else {


            if (atLeastTwo($(this).val()) < 2) {
                fail($(this), 1, '密码中至少包含字母、数字、特殊字符的两种')
            } else {
                success($(this), 1);
            }
        }
    });


    // 再次输入密码校验
    $('.container').find('input').eq(2).change(function() {

        if ($(this).val() == password) {
            success($(this), 2);
        } else {

            fail($(this), 2, '两次输入的密码不一致');
        }

    });
    $('.container').find('input').eq(3).change(function() {

        if (isEmail($(this).val())) {
            success($(this), 3);
        } else {
            fail($(this), 3, '邮箱格式错误');
        }

    });

    // 验证码
    // $.idcode.setCode();

    // $('.container').find('input').eq(3).change(function() {
    //     var IsBy = $.idcode.validateCode();
    //     if (IsBy) {
    //         success($(this), 3);
    //     } else {
    //         fail($(this), 3, '验证码输入错误');
    //     }
    // });

    // // 手机号码
    // var regPhoneNum = /^[0-9]{11}$/
    // $('.container').find('input').eq(4).change(function() {
    //     if (regPhoneNum.test($(this).val())) {
    //         success($(this), 4);
    //     } else {
    //         fail($(this), 4, '手机号码只能为11位数字');
    //     }
    // });

    // //短信验证码
    // var regMsg = /111111/;
    // $('.container').find('input').eq(5).change(function() {
    //     if (check[4]) {
    //         if (regMsg.test($(this).val())) {
    //             success($(this), 5);
    //         } else {
    //             fail($(this), 5, '短信验证码错误');
    //         }
    //     } else {
    //         $('.container').find('input').eq(4).parent().parent().removeClass('has-success').addClass('has-error');
    //     }
    //
    // });


    // $('#loadingButton').click(function() {
    //
    //     if (check[4]) {
    //         $(this).removeClass('btn-primary').addClass('disabled');
    //
    //         $(this).html('<span class="red">59</span> 秒后重新获取');
    //         var secondObj = $('#loadingButton').find('span');
    //         var secondObjVal = secondObj.text();
    //
    //         function secondCounter() {
    //
    //             var secondTimer = setTimeout(function() {
    //                 secondObjVal--;
    //                 secondObj.text(secondObjVal);
    //                 secondCounter();
    //             }, 1000);
    //             if (secondObjVal == 0) {
    //                 clearTimeout(secondTimer);
    //                 $('#loadingButton').text('重新获取校验码');
    //                 $('#loadingButton').removeClass('disabled').addClass('btn-primary');
    //
    //             }
    //         }
    //
    //         secondCounter();
    //     } else {
    //         $('.container').find('input').eq(4).parent().parent().removeClass('has-success').addClass('has-error');
    //     }
    //
    // })

    $('#submit').click(function(e) {
        if (!check.every(function(value) {
            return value == true
        })) {
            e.preventDefault();
            for (key in check) {
                if (!check[key]) {
                    $('.container').find('input').eq(key).parent().parent().removeClass('has-success').addClass('has-error')
                }
            }
        }
    });

    $('#reset').click(function() {
        $('input').slice(0, 7).parent().parent().removeClass('has-error has-success');
        $('.tips').hide();
        $('.glyphicon-ok').hide();
        $('.glyphicon-remove').hide();
        check = [false, false, false, false, true, true,false ];
    });

    layui.use('upload', function(){
        var upload = layui.upload;
        //执行实例
        var uploadInst = upload.render({
            elem: '#oneUpload', //绑定元素
            url: '/common/sysFile/upload', //上传接口
            method: 'post',
            data: {id: 'xxx'},//额外参数
            accept: 'images',//指定允许上传时校验的文件类型，可选值有：images（图片）、file（所有文件）、video（视频）、audio（音频）
            auto: true,//是否自动提交
            exts: 'jpg|png|gif|bmp|jpeg',//扩展名
            // bindAction: '#tj1',//绑定提交地址
            field: 'file',//提交的文件name
            size: 10000,//文件大小
            number: 1,//同时上传文件数
            drag: true,//是否允许拖拽
            multiple: false,
            before: function(){
                console.log('before ....')
                layer.load();
            },
            done: function(res, index, upload){
                //上传完毕回调
                console.log('done ....')
                console.log(res)
                layer.closeAll('loading'); //关闭loading
                if (res.code==0) {
                    $("#portrait").val(res.data)
                    var html_="<img class='zoomify img-thumbnail' height='100px'  src='"+res.data+"' />"
                    $("#picture").empty()
                    $("#picture").append(html_)
                    $('.zoomify').zoomify();
                }else {
                    layer.alert(res.msg, {icon: 2})
                }

            },
            error: function(index, upload){
                console.log('error ....')
                layer.closeAll('loading'); //关闭loading
                layer.alert("上传错误", {icon: 2})
                //请求异常回调
            }
        });
    });

</script>
</body>
</html>
